<script setup lang="ts" name="CkMain">
import { useDrop } from 'vue3-dnd'
import { storeToRefs } from 'pinia'
import { toRefs } from '@vueuse/core'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import { cloneDeep } from 'lodash-es'

const layoutStore = useLayoutStore()

const { isLayoutDragging, isNear, isNearSelf, dropTo, dropLevel, dropIndex, dropId, layout, isItemSort } = storeToRefs(layoutStore)

const cardRef = ref(null)

const position = ref('')

const [dropCollect, drop] = useDrop({
  accept: ['aside', 'tab', 'item', 'package'],
  hover: (item: any, monitor) => {
    if (!cardRef.value) return
    const hoverBoundingRect = cardRef.value?.getBoundingClientRect()
    const clientOffset = monitor.getClientOffset()
    if (clientOffset.x - hoverBoundingRect.left < 20 && clientOffset.x - hoverBoundingRect.left > 0 && (item.config.dragType !== 'item' || item.config.dragType === 'item' && !isItemSort.value) && (item.config.position !== 'left' || item.config.position === 'left' && !item.isNearMain)) {
      position.value = 'left'
      isNear.value = true
      isNearSelf.value = false
      dropLevel.value = layout.value.left.length > 0 ? 'column' : 'aside'
      dropTo.value = 'left'
      dropIndex.value = -1
      dropId.value = layout.value.left.length > 0 ? layout.value.left[0].id : ''
    } else if (hoverBoundingRect.right - clientOffset.x < 20 && hoverBoundingRect.right - clientOffset.x > 0 && (item.config.dragType !== 'item' || item.config.dragType === 'item' && !isItemSort.value) && (item.config.position !== 'right' || item.config.position === 'right' && !item.isNearMain)) {
      position.value = 'right'
      isNear.value = true
      isNearSelf.value = false
      dropLevel.value = layout.value.right.length > 0 ? 'column' : 'aside'
      dropTo.value = 'right'
      dropIndex.value = 0
      dropId.value = layout.value.right.length > 0 ? layout.value.right[0].id : ''
    } else {
      position.value = ''
      isNear.value = false
      isNearSelf.value = false
      dropLevel.value = 'aside'
      dropTo.value = 'root'
      dropIndex.value = -1
      dropId.value = ''
    }
  },
  collect(monitor) {
    return {
      isOver: monitor.isOver(),
      isOverCurrent: monitor.isOver({ shallow: true })
    }
  },
  drop(item) {
    if (dropTo.value === 'left' || dropTo.value === 'right') {
      const res: any = cloneDeep(item)
      res.options.attr.x = 0
      res.options.attr.y = 0
      layoutStore.moveLayout(res)
    }
  }
})

const { isOver } = toRefs(dropCollect)

const setRef = (el) => {
  cardRef.value = drop(el)
}
</script>

<template>
  <div :ref="setRef" class="dnd-container main">
    <slot />
    <div v-if="isLayoutDragging && isOver && position && (position === 'left' || position === 'right')" :class="['indicator primary-color-opacity-3', position]"></div>
  </div>
</template>

<style scoped lang="scss">
.dnd-container {
  position: relative;
  display: flex;
  flex: 1;
}

.indicator {
  position: absolute;
  z-index: 10;

  &.top {
    top: 0;
    right: 0;
    left: 0;
    height: 20px;
    border-top: 4px solid var(--el-color-primary);
    animation: height 300ms linear;
  }

  &.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    border-right: 4px solid var(--el-color-primary);
    animation: width 300ms linear;
  }

  &.bottom {
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    border-bottom: 4px solid var(--el-color-primary);
    animation: height 300ms linear;
  }

  &.left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    border-left: 4px solid var(--el-color-primary);
    animation: width 300ms linear;
  }
}

@keyframes height {
  from {
    height: 0
  }

  to {
    height: 20px
  }
}

@keyframes width {
  from {
    width: 0
  }

  to {
    width: 20px
  }
}
</style>

<style>
.primary-color-opacity-3 {
  background: rgba(var(--el-color-primary-rgb), 0.3);
}
</style>
